.box {
  width: 622px;
  @apply box-border bg-white rounded-32px pt-48px px-32px pb-32px;
  .title {
    @apply text-bold font-500 text-36px text-center;
  }
  .desc {
    @apply text-bold font-normal text-28px text-center mt-18px;
  }
  .avatarControl {
    @apply flex flex-row mt-64px;
    .controlLabel {
      @apply text-bold text-28px;
    }
    .avatarWrap {
      width: 180px;
      height: 180px;
      margin-left: 50px;
      background-color: #f7f7f7;
      @apply rounded-full overflow-hidden box-border;
    }
    .avatarBtn {
      border: none !important;
      background-color: inherit !important;
      outline: none !important;
      padding: 0 !important;
      @apply flex flex-row justify-center items-center w-full h-full text-gray text-64px;
      .avatar {
        width: 180px;
        height: 180px;
        @apply object-cover block rounded-full;
      }
    }
  }
  .nicknameControl {
    @apply flex flex-row box-border mt-32px items-center;
    .avatarWrap {
      border-bottom: 2px solid #f2f2f2;
      @apply box-border;
    }
    .nicknameInput {
      @apply text-28px text-bold p-16px text-center;
    }
    .nicknamePlaceholder {
      color: #bbbbbb;
      @apply text-28px;
    }
  }
  .actions {
    @apply flex flex-row justify-center mt-80px gap-32px;
    .action {
      width: 240px;
      height: 76px;
      border-radius: 44px;
      @apply flex flex-row justify-center items-center box-border text-32px;
      &.cancel {
        background: #f1f5f9;
        @apply text-gray;
      }
      &.confirm {
        @apply text-white bg-primary;
      }
    }
  }
}
